<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>工程用料统计</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">
		<link rel="stylesheet" href="../../../resources/layui/css/layui.css" media="all">
		<link rel="stylesheet" href="../../../resources/css/style.css" media="all">
		<style>
			.layui-input-inline {
				width: 80%;
			}
			/*.layui-form-item .layui-input-inline{width: 165px;}*/
			
			.mainW{display: none;}
			
			.layui-inline {
				margin-bottom: 10px;
			}
			
			.layui-upload {
				text-align: left;
			}
			
			#demo2 img {
				width: 120px;
				height: 120px;
			}
			.detail-list{
				margin-left: 20%;
			}
			.imgs {
				position: relative;
				width: 120px;
				height: 120px;
				float: left;
			}
			
			._ingshan {
				position: absolute;
				right: 0px;
				top: 0px;
				border: 1px solid #E3e3e3;
				border-radius: 50%;
				width: 20px;
				height: 20px;
				text-align: center;
			}
			/*.list td{
				text-align: center;
			}*/
			.sty{
				text-align: right;
			}
			@media only screen and (min-width: 321px) and (max-width: 1024px) {
				/*.layui-form-pane .layui-input-inline {*/
					/*width: 100%;*/
				/*}*/
				._inkong {
					width: auto!important;
				}
				.layui-form-item .layui-input-inline {
					width: 100%;
				}
				
			}
			
			.layui-form-label {
				padding-left: 0;
				height: 20px;
			}
			.material-mask-top li{
				text-align: left;
				padding: 10px;
				list-style: none;
			}
		
		
			.rm_Code,.eppName,.compName1{
				padding-left: 20px;
			}
			.addr{
				height: 40px;
				line-height: 40px;
				background: gainsboro;
			}
			.addr h3{
				font-size: 20px;
			}
			.company{
				height: 50px;
				line-height:50px;
				background: #fff;
				
			}
			#demo li{
				list-style: none;
				text-indent: 1em;
			}
			ul{
				margin-bottom: 50px;
			}
			#demo li:before{
				content:'';
			}
			.layui-form-item .layui-input-inline{width: 80%!important;}
			.mainW{text-align: center;color: #999;}
			.layui-form-item{clear: none;}
		</style>
	</head>

	<body>
		<form class="layui-form layui-form-pane" action="">
			<div class="formTop" style="font-size:12px;">
				<div class="layui-form-item layui-col-xs2 layui-col-sm2 layui-col-md2">
					<div class="layui-input-inline">
						<input type="text" name="username" lay-verify="required" placeholder="项目名称" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item layui-col-xs2 layui-col-sm2 layui-col-md2">
					<div class="layui-input-inline">
						<input type="text" name="gys" lay-verify="required" placeholder="供应商" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-inline layui-col-xs2 layui-col-sm2 layui-col-md2">
					<div class="layui-input-inline">
						<input type="text" class="layui-input" id="test-limit3" placeholder="请选择开始日期">
						<div class="icons">

						</div>
					</div>
				</div>
				<div class="layui-inline layui-col-xs2 layui-col-sm2 layui-col-md2">

					<div class="layui-input-inline">
						<input type="text" class="layui-input" id="test-limit4" placeholder="请选择结束日期">
						<div class="icons">

						</div>
					</div>
				</div>

				<div class="layui-col-xs2 layui-col-sm2 layui-col-md2">
					<button class="layui-btn check chaxun" type="button" onclick="query()">查询</button>

				</div>

			</div>
			<!--<div id="demo">
				<div class="lists"></div>
			</div>-->

			<table id="demo" lay-filter="test">
				<tr id="datalist" class="lists"></tr>
			</table>

		</form>


        <div class="main">
            <div id="pages"></div>
			<div class="mainW">无数据</div>
        </div>

		<script src="../../../resources/layui/layui.js" charset="utf-8"></script>
		<script src="../../../resources/js/style.js"></script>
		<script src="../../../resources/js/api.js"></script>


		<script type="text/javascript">
            layui.use(['form', 'layedit', 'laydate', 'table', 'laypage', 'layer'], function() {
            /** js 1
             * 加载页面数据方法
             * @param laypage layui的分页对象
             * @param pageSize 获取的数据数量
             * @param page 想要获取的页数
             * @param first 是否为了初始化页面。
             */
            function initData(laypage,pageSize,page,first) {
				//初始化。
                $('#datalist').html('');

                ajaxs('/api/material/buildUseMaterTotal.do', 'post', {
                    'p': getCookie('yanzheng'),
                    'pageSize': pageSize,
                    'currPage':page
                }, function (data) {   //初次加载页面获取数据
                    //console.log(data);
                    fdata(data,laypage,first);
                });
            }


            /**
             * 解析buildUseMaterTotal接口数据到页面
             */
            window.fdata = function(data,laypage,first) {
                var obj={};

                //返回的数据
                var cc_data = data.data;
                //这是一个工程名称的集合。
                var ul = [];
                //把所有的工程名称加入ul中
                for(var i=0;i<cc_data.length;i++){
                    ul.push(cc_data[i].proName)
                }
                //去重
                ul = ul.unique3();
                for(var i=0;i<ul.length;i++){
                    var header = "<ul><li class='addr'><h3>"+ul[i]+'</h3></li>';
                    var frist1 = true;
                    $(".list"+i).html('');
                    for(var j=0;j<cc_data.length;j++){
                        if(cc_data[j].proName==ul[i]){
                            if (frist1){
                                header += '<li class="company">' +
                                    '<span>施工单位：</span><span>'+cc_data[j].compName1+'</span>' +
                                    '<span class="detail-list">施工单位负责人：</span><span>'+cc_data[j].compPerson1+'</span>' +
                                    '</li>' +
                                    '<li>' +
                                    '   <table class="layui-table list'+i+'">' +
                                    '<thead><tr><th>材料名称</th><th>材料规格</th><th>材料数量</th><th>材料单位</th><th>材料供货商</th> </tr>  </thead>' +
                                    '</table></li></ul>';
                                frist1 = false;
                                $(".lists").append(header);
                            }
                            $(".list"+i).append('<tbody><tr><td>'+cc_data[j].mat_Name+'</td><td>'+cc_data[j].mat_Spec+'</td><td>'+undefinedTo0(cc_data[j].fhzNum)+'</td><td>'+cc_data[j].mat_Bit+'</td><td>'+cc_data[j].gys+'</td></tr></tbody></table>');
                            //console.log('<appengs!!----------------')
                        }
                    }
                }
                $('.list tr td').each(function () {
                    if($(this).text()=='undefined'){
                        $(this).text('');
                    }

                })
                //分页。
                if(first){
                    laypage.render({
                        elem: 'pages'
                        ,count: data.totalNum
                        // ,count: 100
                        ,layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
                        ,jump: function(obj,frist2){
                            if(!frist2) {
                                initData(laypage, obj.limit,obj.curr,false);
                            }
                        }
                    })
                }

            }
            /**
             * 数组去重
             * @returns {*[]}
             */
            Array.prototype.unique3 = function(){
                var res = [];
                var json = {};
                for(var i = 0; i < this.length; i++){
                    if(!json[this[i]]){
                        res.push(this[i]);
                        json[this[i]] = 1;
                    }
                }
                return res;
            }
            /**
             * 如果传入参数
             * 为undefined返回0
             * 否则返回parseInt(number)
             * @param number
             * @returns {*}
             */
            function undefinedTo0(number) {
                if (number == undefined){
                    return 0;
                }
                return parseInt(number);
            }
            // js 2

			window.query = function () {
				$('#datalist').html('');
				layui.use(['form', 'layedit', 'laydate', 'table', 'element'], function() {
					var form = layui.form,
						table = layui.table;
					var pronName = $("[name='username']").val();
					var begintime = $('#test-limit3').val();
					var endtime = $('#test-limit4').val();
					var compname=$('[name="gys"]').val();
					if(!AntiSqlValid(pronName)) {
                        ajaxs('/api/material/buildUseMaterTotal.do', 'post', {
                            'p': getCookie('yanzheng'),
                            'pageSize': 10,
                            'currPage':1,
                            'proName': pronName,
                            'begintime': begintime,
                            'endtime': endtime,
							'compname':compname

                        }, function (data) {   //初次加载页面获取数据
                            //console.log(data, '调用成功！！！！！！！');
                            if(data.data==false){

                               	$('.mainW').show();

								$('#pages').hide();

								return;
							}else{
                                $('#pages').show();
                                $('.mainW').hide();


                            }

                            fdata(data, laypage,true);
                        });


//						API.ENgongchengyongliao({
//							'proName': pronName,
//							'begintime': begintime,
//							'endtime': endtime,
//                            'p':getCookie('yanzheng')
//						})
					} else {
						layer.msg('请勿输入特殊符号或敏感文字');
					};
				})

			}
                var form = layui.form,
                    layer = layui.layer,
                    layedit = layui.layedit,
                    table = layui.table,
                    laydate = layui.laydate,
                    laypage = layui.laypage;
                //前后若干天可选，这里设置不能选过去的日期      最远可选1000天之后
                panduanshijiantow('#test-limit3', '#test-limit4', 1000, 1000, '.chaxun'); //查询 开始结束时间判断
//
                $(".check").click(function () {
//                    $(".lists").hide();
                })


                initData(laypage,10,1,true);
            })




		</script>

	</body>

</html>